<template>
  <div
    class="w-full h-full flex justify-center items-center box-border bg-[url('../../assets/login/wtt.jpg')] bg-no-repeat bg-[length:100%_100%]"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="140px"
      class="demo-ruleForm w-[50%] h-[50%] bg-[--themeBackground] pt-[40px] px-10 rounded"
      status-icon
    >
      <el-form-item label="姓名：" prop="emplyName">
        <el-input v-model="ruleForm.emplyName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="性别：" prop="gender">
        <el-select v-model="ruleForm.gender" placeholder="请选择性别">
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号：" prop="mobileNum">
        <el-input v-model="ruleForm.mobileNum" placeholder="请输入号码" />
      </el-form-item>
      <el-form-item label="身份证号：" prop="idNo">
        <el-input v-model="ruleForm.idNo" placeholder="请输入身份证号" />
      </el-form-item>
      <el-form-item label="排序号：" prop="sort">
        <el-input v-model="ruleForm.sort" placeholder="请输入排序号" />
      </el-form-item>
      <el-form-item label="公司：">
        <span>{{ ruleForm.superOrgId }}</span>
      </el-form-item>
      <el-form-item>
        <div class="w-full flex items-center justify-center">
          <el-button @click="cancel"> 取消 </el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)"> 确定 </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import {_add} from '@/api/login/login' 
import { ElMessage } from "element-plus";

export default defineComponent({
  setup() {
    const router = useRouter();
    const ruleFormRef = ref();
    const data = reactive({
      ruleForm: {
        emplyName: "",
        gender: "",
        mobileNum: "",
        idNo: "",
        sort: "",
        superOrgId: "1612339338446827521",
      },
      rules: {
        emplyName: [{ required: true, message: "请输入姓名", trigger: "change" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        mobileNum: [{ required: true, message: "请输入号码", trigger: "change" }],
        idNo: [{ required: true, message: "请输入身份证号", trigger: "change" }],
        sort: [{ required: true, message: "请输入排序号", trigger: "change" }],
      },
      cancel: () => {
        router.push("/login");
      },
      submitForm: async(formEl: FormInstance | undefined) => {
        if (!formEl) return;
        await formEl.validate(async(valid, fields) => {
          if (valid) {
             const reg = /^1\d{10}$/;
            if (!reg.test(data.ruleForm.mobileNum)) {
                ElMessage.error("请输入正确的手机号");
                return;
            }
            const res:any=await _add(data.ruleForm)
              if (res.code === 10000) {
                ElMessage({
                  message: res.message,
                  type: "success",
                });
                router.push("/login");
              } else {
                ElMessage({
                  message: res.message,
                  type: "error",
                });
              }
          } else {
            console.log("error submit!", fields);
          }
        });
      },
      resetForm: (formEl: FormInstance | undefined) => {
        if (!formEl) return;
        formEl.resetFields();
      },
    });
    return {
      ...toRefs(data),
      ruleFormRef,
    };
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  .el-select {
    width: 100%;
  }
}
</style>
